<template>
    <div class="header">
        <el-image :src="toolBarPic" style="padding-bottom: 10px"/>
        <el-form class="search"> 
            <el-input
                v-model="searchedContent"
                placeholder="你在寻找什么呢..."
                placeholder-class="input-placeholder"
            >
            <template #append>
                <el-button @click="search">
                    <template #icon>
                        <el-icon><Search /></el-icon>
                    </template>
                </el-button>
            </template>
            </el-input>
        </el-form>
        <el-avatar :size="avatarSize" :src="toolBarAvatar" class="avatar" />
    </div>
</template>

<script setup>
import { ref, reactive} from 'vue'
import { useRouter, useRoute } from 'vue-router'
 
    const router = useRouter()
    const searchedContent = ref("")
    const toolBarPic = ref("/src/assets/headerPic.png")
    const toolBarAvatar = ref("/src/assets/zhicheng.jpg")

    const search = () => {
        // console.log(searchedContent.value)   
        router.push({
            path: '/search',
            query: {
                title: searchedContent.value,
                page: 1
            }
        })
    }


    const avatarSize = ref(40)

</script>

<style src="@/styles/Components/Header.scss" scoped>

</style>